<html>
    <head>
        <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">
       <meta name="format-detection" content="telephone=no">
        <title>倒计时</title>
    </head>
    <body>
        <div id="showInfo"></div>
        <div id="showTime"></div>
    </body>
</html>
<script type="text/javascript">

    // 放假时间 
    const holiday_date = '2021/06/11 17:00:00' 

   function showtime(date) {
        const date1 = new Date().getTime()
        const date2 = new Date(date).getTime()
        const lefttime = date2 - date1
        if(lefttime<=0){
            return '已放假'
        }
        let day = Math.floor(lefttime / (1000 * 60 * 60 *24) )
        let hour = Math.floor(lefttime / (1000 * 60 * 60) % 24)
        let minute = Math.floor(lefttime / (1000 * 60) % 60)
        let second = Math.floor(lefttime / 1000 % 60);
         day = day < 10 ? '0' + day : day
        hour = hour < 10 ? '0' + hour : hour
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        return '距离放假还有' + day + '天' + hour + "时" + minute + "分" + second + '秒';
    }

    setInterval(function() {
        document.querySelector("#showtime").innerHTML = showtime(holiday_date);
        document.querySelector("#showInfo").innerHTML = '放假倒计时'
    }, 1000);
</script>

<style type="text/css">
    #showInfo {
        width: 100%;
        text-align: center;
        margin-top: 5%;
        font-size: 40px;
        color: darkgray;
    }

    #showTime {
        width: 100%;
        text-align: center;
        margin-top: 2%;
        font-size: 500%;
        font-weight: bold;
    }
</style>
